<template>
   <div class="menu-left" ref="wrapper">
      <ul>
        <li class="menu-item" v-for="(item,index) in catdata"
        :key="index"
        :class="{current: index == currentIndex}"
        @click="clickList(index)"
        ref="menuList">
          <p class="text">{{item.cat_name}}</p>
        </li>
      </ul>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CategoryLeft',
  props: {
    catdata: {
      type: Array
    }
  },
  data () {
    return {
      currentIndex: 0
    }
  },
  methods: {
    clickList (index) {
      // console.log(index)
      this.currentIndex = index
      this.$emit('childrenClick', index)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: {
          type: Number,
          default: 1
        },
        click: true
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.current p{
  color: aqua;
}
.menu-left{
    flex: 0 0 80px;
    height: 100%;
    overflow: hidden;
    background-color: #f3f5f7;
    .menu-item{
      width: 100%;
      padding: 20px 10px;
      // overflow: hidden;
      .text{
        font-size: 12px;
        width: 100%;
        line-height: 20px;
        margin-bottom: 0;
      }
    }
    .current{
      width: 98%;
      background-color: #ffff;
      ::after{
        content: '';
        display: block;
        width: 3px;
        height: 40px;
        background-color: #dd524d;
        position: absolute;
        left: -3px;
        top: -50%;
      }
      .text{
        color: #dd524d;
        transform: scale(125%);
      }
    }
  }
</style>
